<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<style>

</style>
<body>
<script src="../../../../subassembly/threeJs/three.min.js"></script>
<!--引入照相机插件-->
<script src="../../../../subassembly/threeJs/OrbitControls.js"></script>
<!--引入鼠标交互插件-->
<script src="../../../../subassembly/threeJs/core/Raycaster.js" type="module"></script>
<script src="../../../../subassembly/threeJs/loader/OBJLoader.js"></script>
<script src="../../../../subassembly/threeJs/loader/MTLLoader.js"></script>
<script>
  var renderer, scene, camera, ambient;

  function init() {
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 400; //三维场景显示范围控制系数，系数越大，显示的范围越大
    /**
     * 创建渲染器对象
     */
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    // renderer.antiAlias = true;
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    // document.getElementById("3d-demo").innerHTML = renderer; //body元素中插入canvas对象
    // 创建场景对象Scene
    scene = new THREE.Scene();
    //创建相机对象
    // 1、正投影相机: OrthographicCamera
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    // 2、透视投影相机: PerspectiveCamera (特点远小近大)
    // var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

    //环境光
    ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    // 创建控件对象，以相机为对象，监听鼠标的变化，改变相机对象的属性，能鼠标能对相机操作起来
    var controls = new THREE.OrbitControls(camera, this.renderer.domElement);
    controls.mouseButtons.left = null;
    controls.mouseButtons.left = THREE.MOUSE.DOLLY;
    controls.mouseButtons.right = THREE.ROTATE;
    // 监听鼠标事件，渲染函数，更新canvas画布(这段非必要)
    controls.addEventListener("change", render);
  }

  init();
  // 添加第二个图形
  /*  geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    material = new THREE.MeshLambertMaterial({
      color: 0xffff00,
      // 开启透明效果
      transparent: true,
      // 透明效果值配置
      opacity: 0.9,
    }); //材质对象Material
    mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    // Y轴平移100，这里的Y轴是向上的
    mesh.translateY(100);
    scene.add(mesh); //网格模型添加到场景中*/

  // 添加坐标辅助线
  var axesHelper = new THREE.AxesHelper(250);
  scene.add(axesHelper);
  // 添加网格底座（添加陆地）
  /*  var gridHelper = new THREE.GridHelper(500, 20, 'rgba(200, 200, 200, 1)', 'rgba(100, 100, 100, 1)');
    scene.add(gridHelper);*/
  /**
   * 光源设置
   */
    //点光源
  var point = new THREE.PointLight(0xffffff);
  point.position.set(400, 200, 300); //点光源位置
  scene.add(point); //点光源添加到场景中

  // console.log(scene)
  // console.log(scene.children)


  /**
   *  执行渲染操作，指定场景、相机作为参数
   */
  function render() {
    renderer.render(scene, camera);
  }

  function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
  }

  // animate();
  render();



  // 画一条折线
  /*const points = [];
  points.push( new THREE.Vector3( - 50, 200, 0 ) );
  points.push( new THREE.Vector3( 0, 220, 0 ) );
  points.push( new THREE.Vector3( 50, 200, 20 ) );

  geometry = new THREE.BufferGeometry().setFromPoints( points );
  var line = new THREE.Line( geometry, material );
  scene.add( line );
  render();*/

  // 创建一个超级简单的3d字体
  var textLoad = new THREE.FontLoader().load('../../../../subassembly/threeJs/fonts/helvetiker_regular.typeface.json', function (font) {
    const color = 0x006699;

    const matDark = new THREE.LineBasicMaterial({
      color: color,
      side: THREE.DoubleSide
    });

    const matLite = new THREE.MeshBasicMaterial({
      color: color,
      transparent: true,
      opacity: 0.4,
      side: THREE.DoubleSide
    });

    const message = 'hello';

    const shapes = font.generateShapes(message, 100);

    const geometry = new THREE.ShapeGeometry(shapes);

    geometry.computeBoundingBox();

    const xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);

    geometry.translate(xMid, 0, 0);

    // make shape ( N.B. edge view not visible )

    const text = new THREE.Mesh(geometry, matLite);
    text.position.z = -150;
    // scene.add( text );

    // make line shape ( N.B. edge view remains visible )


    const lineText = new THREE.Object3D();

    for (let i = 0; i < shapes.length; i++) {

      const shape = shapes[i];

      const points = shape.getPoints();
      const geometry = new THREE.BufferGeometry().setFromPoints(points);

      geometry.translate(xMid, 0, 0);

      const lineMesh = new THREE.Line(geometry, matDark);
      lineText.add(lineMesh);

    }

    scene.add(lineText);

    render();
    loadBuild();
  });

  function loadBuild() {
    var loader = new THREE.OBJLoader();
    var mtlLoader = new THREE.MTLLoader();

    mtlLoader.setPath("../../../../resources/cmdb/model/room/");
    mtlLoader.load('room.mtl', (mtl) => {
      mtl.preload();
      loader.setMaterials(mtl);
      loader.setPath("../../../../resources/cmdb/model/room/");
      // load a resource
      loader.load(
        // resource URL
        'room.obj',
        function (object) {
          const renderingParent = new THREE.Group();
          renderingParent.scale.set(1, 1, 1);
          renderingParent.add(object);
          scene.add(renderingParent);
        }
      );
    });
  }


  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();
  renderer.domElement.addEventListener("mousedown", (event) => {
    if (event.button === 0) {
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      //将平面坐标系转为世界坐标系
      raycaster.setFromCamera(mouse, camera);
      var intersects = raycaster.intersectObjects(scene.children);

      scene.traverse(function(obj) {
        if (obj.type === "Group") {
          console.log(obj.id);
          // obj.material.color.set("#ff0000");
          // obj.material.needsUpdate = true;
        }
        if (obj.type === "Mesh" && obj.name.indexOf("墙") !== -1) {
          console.log('  ' + obj.name);
          obj.material.color.set(0xffff00);
        }
        // 打印id属性
        // console.log(obj.id);
        // 打印该对象的父对象
        //  console.log(obj.parent);
        // 打印该对象的子对象
        //  console.log(obj.children);
      });
    } else if (event.button === 2){
      console.log("鼠标右键!");
    }
  })
</script>
</body>
</html>
